<!--  -->
<template>
  <div class="pannebox">
      <cube-scroll class="leftlist">
          <ul>
              <li v-for="(list,index) in tabslabel" @click="selectilist(index)" :class="list.active?'active':'' " :key="index">
                      {{list.label}}
              </li>
          </ul>
  </cube-scroll>
   <cube-scroll class="rightlist">
          <ul>
              <li v-for="(tag,index) in tags"  :key="index">
                      <img :src="tag.image" alt=""/>
                      <p>{{tag.label}}<i class="cubeic-add" @click="addtocart($event,tag)"></i></p>
              </li>
          </ul>
  </cube-scroll>
  <div class="ball-wrap">
          <transition
           @before-enter="beforeEnter"
           @enter="enter"
           @afterEnter="afterEnter"
          >
                <div class="ball" v-if="ball.show">
                        <div class="inner">
                            <i class="cubeic-add"></i>
                        </div>

                </div>


          </transition>

  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
        ball:{
            show:false,
            el:""
        },
        tags:[],
        tabslabel:[
            {
                label:"热门推荐",
                active:true
            },
             {
                label:"手机数码",
                active:false
            },
             {
                label:"电脑办公",
                active:false
            },
             {
                label:"家用电器",
                active:false
            },
             {
                label:"计生情趣",
                active:false
            },
             {
                label:"美妆护肤",
                active:false
            }
        ]
    };
  },
  
  methods:{
    //   点击左侧获取右侧内容
    selectilist(index){
     this.tabslabel.forEach((val,ind)=>{
         if(index==ind){
             val.active=true
         }else{
             val.active=false
         }
     })
     this.getfenlei(index)
    },
    //   获取分类
      async  getfenlei(index){
         const result=await this.$http.get("/api/rollinglist",{params:{type:index}})
       console.log(result);
         this.tags=result.data
       },
    //   添加商品到购物车
   addtocart(e,tag){
          this.$store.commit("tocart",tag)
          this.ball.show=true
          
   },
    //   动画
      beforeEnter(el){

      },
      enter(el,done){

      },
      afterEnter(el){

      }


  },
  created(){
this.getfenlei(0)
  },
  mounted(){
    //   设置滚动盒子的高度
    const leftbox=document.querySelector(".leftlist")
     const rightbox=document.querySelector(".rightlist")
     const bodyheight=document.documentElement.clientHeight
     leftbox.style.height=bodyheight-54+'px'
      rightbox.style.height=bodyheight-54+'px'
  }

}

</script>
<style>
.pannebox{
    display: flex;
}
.pannebox .leftlist{
    width: 30%;
}
.pannebox .leftlist li{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #fff;
    color:#333;
    background: #f8f8f8;
    font-size: 14px;
}
.pannebox .leftlist .active{
    background: #fff;
    color:#e93b3b;
}
.pannebox .rightlist{
    width:70%;
}
.pannebox .rightlist ul{
    display: flex;
    flex-wrap: wrap;
}
.pannebox .rightlist ul li{
     width: 50%;
     display: flex;
    align-items: center;
    flex-direction: column;
     font-size: 15px;
}
.pannebox .rightlist ul li img{
    width: 80px;
    height: 80px;
}
.pannebox .rightlist ul li p{
    text-align: center;
    font-weight: bold;
}
 .pannebox .rightlist ul li p i{
     font-size: 22px;
} 
.ball-wrap .ball{
     position: fixed;
     left:70%;
     bottom: 10px;
     z-index:1003;
     color:red;
     transition: all is cubic-bezier(0.49,-0.29,0.75,0.41);
}
.ball-wrap .inner{
   height: 16px;
    width: 16px;
    transition: all is linear;

}

</style>